<template>
  <el-row :gutter="10">
    <el-col :span="16">
      <basic-container>
        <div>数据总览</div>
        <avue-data-panel class="dataSet" :option="option"></avue-data-panel>
      </basic-container>
    </el-col>
    <el-col :span="8">
      <basic-container>
        <div>待办事项</div>
        <avue-data-display :option="dbOption"></avue-data-display>

      </basic-container>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="16">
      <basic-container>
        <div>业务流程</div>
        <div style="text-align: center">
          <el-image :src="lcImg" style="height: 284px"></el-image>
        </div>

      </basic-container>
    </el-col>
    <el-col :span="8">
      <basic-container>
        <div>我的发起</div>
        <avue-data-display :option="fqOption"></avue-data-display>
      </basic-container>
      <basic-container>
        <div>预警信息</div>
        <avue-data-display :option="yjOption"></avue-data-display>
      </basic-container>
    </el-col>
  </el-row>
  <basic-container>
    <div ref="container" style="height: 300px" />
  </basic-container>
</template>

<script>
  import * as echarts from 'echarts'
  import {onBeforeUnmount, onMounted, ref} from "vue";
  import {getDaysInMonth} from "../../utils/common";
  import lc from '@/assets/imgs/lc.png';
	export default {
		name: "Dashboard",
		components: {},
		setup() {
      const chart = ref(null);
      const lcImg = ref(lc);
      const container = ref(null);
      const xAxisData = ref([])
      const option = ref(  {
            span:6,
            data: [
          {
            title: '生产任务单',
            count: 12332,
            icon: 'el-icon-warning',
            color: 'rgb(49, 180, 141)',
            background: '#2d8cf0',
          },
          {
            title: '生产工单',
            count: 33,
            icon: 'el-icon-view',
            color: 'rgb(56, 161, 242)',
          },
          {
            title: '产量',
            count: 2223,
            icon: 'el-icon-setting',
            color: 'rgb(117, 56, 199)',
          },
          {
            title: '不良品',
            count: 2223,
            icon: 'el-icon-setting',
            color: 'rgb(117, 56, 199)',
          },
        ]
      });
      const dbOption = ref({span: 8,
        data: [
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: 100,
            decimals: 2,
            fontColor: "#000",
            title: "单据待审核",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: "3,000",
            title: "待生产任务单",
            fontColor: "#000",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            fontColor: "#000",
            count: "20,000",
            title: "待生产工单",
          }
        ],
      })
      const fqOption = ref({span: 8,
        data: [
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: 100,
            decimals: 2,
            fontColor: "#000",
            title: "生产任务单",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: "3,000",
            title: "生产工单",
            fontColor: "#000",
          },

        ],
      })
      const yjOption = ref({span: 8,
        data: [
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: 100,
            decimals: 2,
            fontColor: "#000",
            title: "超期生产任务单",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: "3,000",
            title: "超期生产工单",
            fontColor: "#000",
          },

        ],
      })

      const initChart = () => {
        chart.value = echarts.init(container.value);
        chart.value.setOption({
          title: {
            text: '产能趋势'
          },
          legend: { },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: xAxisData.value,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '产量',
              type: 'bar',
              data: [1000, 520, 200, 3341, 3922, 3302, 2220]
            },
            {
              name: '不良品',
              type: 'bar',
              data: [10, 52, 0, 334, 390, 330, 220]
            }
          ]
        })
      }
      const setXData = (year,month)=>{
        xAxisData.value = []
        let daysInMonth = getDaysInMonth(year,month);
        for (let i = 1; i <= daysInMonth; i++) {
          if (i< 10){
            xAxisData.value.push('0'+i)
          }else{
            xAxisData.value.push(i)
          }

        }
      }
      onBeforeUnmount(() => {
        dispose()
      })
      onMounted(() => {
        let date = new Date();
        setXData(date.getFullYear(),date.getMonth())

        initChart()
      })

      const dispose = () => {
        if (!chart.value) {
          return
        }
        chart.value.dispose()
        chart.value = null
      }



      return {
        container,
        initChart,
        dispose,
        option,
        dbOption,
        fqOption,yjOption,lcImg
      }
		}
	};
</script>

<style lang="scss" scoped>
	.container {}

	.fh {
		margin: 0 10px;
		font-size: 30px;
	}
  .dataSet{
   ::v-deep( .item){
     margin: 0;
     box-shadow: none;
     cursor: default;
   }
  }
</style>
